/**
* Created with base_sf.
* User: jorgeflores
* Date: 2014-07-17
* Time: 08:51 PM
* To change this template use Tools | Templates.
*/
var data;
var dataAdapter;

$(document).ready(function () {
    //var data = [{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"}];
    data = buscarUsuario('');
    var source =
    {
        datatype: "json",
        datafields: [
            { name: 'username' },
            { name: 'nombre' },
            { name: 'apePaterno'},
            { name: 'apeMaterno'},
            { name: 'fechaUltimoIngreso', type: 'date'}
        ],
        localdata: data
    };
    
    dataAdapter = new $.jqx.dataAdapter(source);   
    
    
    $("#jqGrid").jqxGrid({
                width: 960,
                source: dataAdapter,
                columnsresize: true,
                columns: [
                  { text: 'Username', datafield: 'username', width: 150 },
                  { text: 'Nombres', datafield: 'nombre', width: 250 },
                  { text: 'Apellido Paterno', datafield: 'apePaterno', width: 180 },
                  { text: 'Apellido Materno', datafield: 'apeMaterno', width: 180 },
                  { text: 'Ultimo Ingreso', datafield: 'fechaUltimoIngreso',cellsformat:'dd-MM-yyyy HH:mm:ss', width: 200 }
                ],
                showtoolbar: true,
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    var lblBuscar = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>Buscar: </span>");
                    var txtBuscar = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='txtBuscar' type='text' style='height: 23px; float: left; width: 223px;' />");
                    var btnBuscar = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='btnBuscar' type='button' value='Buscar' style='margin: 0 0 5px 5px;height: 23px; float: left; width: auto;' />");
                    var btnDelete = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='btnDelete' type='button' value='Eliminar' style='margin: 0 0 5px 5px;height: 23px; float: right; width: auto;' />");
                    var btnAdd = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='btnAdd' type='button' value='Agregar' style='margin: 0 0 5px 5px; height: 23px; float: right; width: auto;' />");
                    
                    toolbar.append(container);
                    container.append(lblBuscar);
                    container.append(txtBuscar);
                    container.append(btnBuscar);
                    container.append(btnDelete);
                    container.append(btnAdd);                    
                    $("#btnBuscar").jqxButton({ width: '100'});
                    $("#btnAdd").jqxButton({ width: '100'});
                    $("#btnDelete").jqxButton({ width: '100'});
                                                           
                }
    });
    
    $('#btnBuscar').click(function(){
        data = buscarUsuario($('#txtBuscar').val());
        source.localdata = data;
        dataAdapter.dataBind();
        //$('#jqGrid').jqxGrid('refreshdata');
        //$('#jqGrid').jqxGrid('refresh');
         
    });
    
    $("#btnAdd").click(function(){
         popUpLbox(Routing.generate('versal_admin_crear_usuario', true));
    });
    
});




function buscarUsuario(usuario){
     var resultado;
     var url = Routing.generate('versal_admin_get_usuario', {username : usuario}, true);
     $.ajax({            
            async: false,
            url: url,
            success: function(result){
                resultado = result;              
            },
            error: function(jQ, status, error) {
                alert(error);
            }
            
        });
    return resultado;
    
}